<template>
    <main class="content">
      <div class="content-wrapper">
        <h2>欢迎使用 Vue.js 应用</h2>
        <p>这是一个简单的 Vue.js 页面示例，采用上中下布局设计。</p>
        
        <div class="feature-cards">
          <div class="card">
            <h3>特性一</h3>
            <p>这里是第一个特性描述，简明扼要地介绍功能。</p>
          </div>
          <div class="card">
            <h3>特性二</h3>
            <p>这里是第二个特性描述，展示另一个功能点。</p>
          </div>
          <div class="card">
            <h3>特性三</h3>
            <p>这里是第三个特性描述，提供第三个功能介绍。</p>
          </div>
        </div>
      </div>
    </main>
  </template>
  
  <script>
  export default {
    name: 'TheContent'
  }
  </script>
  
  <style scoped>
  .content {
    flex: 1;
    padding: 2rem 0;
  }
  
  .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  
  .content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
  }
  
  .content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #555;
  }
  
  .feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
  }
  
  .card {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .card h3 {
    color: #3498db;
    margin-bottom: 1rem;
  }
  
  .card p {
    color: #666;
  }
  </style>